<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Document</title>
    <!-- CSS only -->
    <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
    />
    <style>
        .red {
            color: red !important;
        }

        .search {
            width: 300px;
            margin: 20px 0;
        }

        .my-form {
            display: flex;
            margin: 20px 0;
        }

        .my-form input {
            flex: 1;
            margin-right: 20px;
        }

        .table > :not(:first-child) {
            border-top: none;
        }

        .contain {
            display: flex;
            padding: 10px;
        }

        .list-box {
            flex: 1;
            padding: 0 30px;
        }

        .list-box a {
            text-decoration: none;
        }

        .echarts-box {
            width: 600px;
            height: 400px;
            padding: 30px;
            margin: 0 auto;
            border: 1px solid #ccc;
        }

        tfoot {
            font-weight: bold;
        }

        @media screen and (max-width: 1000px) {
            .contain {
                flex-wrap: wrap;
            }

            .list-box {
                width: 100%;
            }

            .echarts-box {
                margin-top: 30px;
            }
        }
    </style>
</head>
<body>
<div id="app">
    <div class="contain">
        <!-- 左侧列表 -->
        <div class="list-box">

            <!-- 添加资产 -->
            <form class="my-form">
                <input v-model.trim="name" type="text" class="form-control" placeholder="消费名称"/>
                <input v-model.number="price" type="text" class="form-control" placeholder="消费价格"/>
                <button @click="add" type="button" class="btn btn-primary">添加账单</button>
            </form>

            <table class="table table-hover">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>消费名称</th>
                    <th>消费价格</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,index) in list" :key="item.id">
                    <td>{{index + 1}}</td>
                    <td>{{item.name}}</td>
                    <td :class="{red:item.price>500}">{{item.price.toFixed(2)}}</td>
                    <td><a @click="del(item.id)" href="javascript:;">删除</a></td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="4">消费总计： {{totalPrice}}</td>
                </tr>
                </tfoot>
            </table>
        </div>

        <!-- 右侧图表 -->
        <div class="echarts-box" id="main"></div>
    </div>
</div>
<script src="./echarts.min.js"></script>
<script src="./vue.js"></script>
<script src="./axios.js"></script>
<script>
    /**
     * 接口文档地址：
     * https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058
     *
     * 功能需求：
     * 1. 基本渲染
     * 2. 添加功能
     * 3. 删除功能
     * 4. 饼图渲染
     */
    const app = new Vue({
        el: '#app',
        data: {
            list: [],
            name: "",
            price: ""
        },
        computed: {
            totalPrice() {
                return this.list.reduce((sum, item) => sum + item.price, 0)
            }
        },
        methods: {
            // 封装获取列表的请求
            async getList() {
                const res = await axios.get("https://applet-base-api-t.itheima.net/bill", {
                    params: {
                        creator: "lll"
                    }
                });
                this.list = res.data.data

                // 更新图表
                this.myChart.setOption({
                    // 数据项
                    series: [
                        {
                            // data: [
                            //     // 具体数据
                            //     {value:100,name:"111"},
                            //     {value:100,name:"222"},
                            // ]
                            data: this.list.map(item => {
                                return {
                                    value: item.price, name: item.name
                                }
                            })
                        }
                    ]
                })
            },
            async add() {
                if (!this.name) {
                    alert("请输入消费名称")
                    return
                }
                if (typeof this.price !== "number") {
                    alert("请输入正确的价格")
                    return
                }
                // 发送添加请求
                const res = await axios.post("https://applet-base-api-t.itheima.net/bill", {
                    creator: "lll",
                    name: this.name,
                    price: this.price
                });
                console.log(res)
                // 添加完成，重新渲染
                this.getList()

                this.name = ""
                this.price = ""
            },
            async del(id) {
                // console.log(id)
                // 发送删除请求
                const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`);
                // 重新渲染
                this.getList()
            }
        },
        created() {
            this.getList()
        },
        mounted() {
            this.myChart = echarts.init(document.querySelector("#main"));
            this.myChart.setOption({
                    // 大标题
                    title: {
                        text: '小黑子消费账单列表',
                        left: 'center'
                    },
                    // 提示框
                    tooltip: {
                        trigger: 'item'
                    },
                    // 图例
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    // 数据项
                    series: [
                        {
                            name: '消费账单',
                            type: 'pie',
                            radius: '50%',
                            data: [
                                // 具体数据
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                }
            )
        }
    })
</script>
</body>
</html>
